import {defineComponent,h,watch} from "vue";
import {RangePicker,TimeRangePicker} from "ant-design-vue";
export default defineComponent({
    name:'ExRangePicker',
    props:{
        type:{
            type:String,
            default:'date'
        },
        startField:String,
        endField:String,
        startValue:String,
        endValue:String,
        changeWatch:{
            type:Boolean,
            default:true
        },
    },
    emits:['update:startValue','update:endValue'],
    setup(props,ctx){
        console.log(ctx)
        console.log(props)
        if(props.changeWatch){
            watch(()=>props.startValue,value=>{

                if(isValue(value)){
                    ctx.attrs.value[0] = value
                }

            },{immediate:true})
            watch(()=>props.endValue,value=>{
                if(isValue(value)){
                    ctx.attrs.value[1] = value
                }

            },{immediate:true})

        }
        watch(()=>ctx.attrs.value,value=>{
            if (value === null || value === undefined) {
                emit(null,null)
            } else {
                if(props.startField === props.endField){
                    emit(value,value)
                }else{
                    emit(value[0],value[1])
                }

            }
        })
        function isValue(value){
            if(Array.isArray(ctx.attrs.value) && !Array.isArray(value) && value !== undefined){
               return true
            }
            return false
        }
        function emit(start,end){
            ctx.emit('update:startValue',start)
            ctx.emit('update:endValue',end)
        }
    },
    render(e){
        return h(e.type == 'time'?TimeRangePicker:RangePicker,e.$attrs, e.$slots)
    }
})